// This sets up our gorko helper classes.
// Read more @ https://github.com/hankchizljaw/gorko#configuration

/**
 * BASE SIZE
 * All calculations are based on this. It's recommended that
 * you keep it at 1rem because that is the root font size. You
 * can set it to whatever you like and whatever unit you like.
 */
$gorko-base-size: 1rem;

/**
* SIZE SCALE
* This is a linear scale that powers all the utilities that
* it is relevant for (margin, padding, etc.). All items are
* calcuated off the base size, so change that and cascade across
* your whole project.
*/
$gorko-size-scale: (
  0:  0,                          // 0
  50: $gorko-base-size * 0.125,   // 2px
  100: $gorko-base-size * 0.25,   // 4px
  200: $gorko-base-size * 0.5,    // 8px
  300: $gorko-base-size,          // 16px
  400: $gorko-base-size * 1.5,    // 24px
  500: $gorko-base-size * 2,      // 32px
  600: $gorko-base-size * 2.5,    // 40px
  700: $gorko-base-size * 3,      // 48px
  800: $gorko-base-size * 3.5,    // 56px
  900: $gorko-base-size * 4,      // 64px
  1000: $gorko-base-size * 4.5,   // 72px
);

/**
* COLORS
* Colors are shared between backgrounds and text by default.
* You can also use them to power borders, fills or shadows, for example.
* It'd be nice if these could also output custom properties for us.
* I've filed an issue to discuss: https://github.com/hankchizljaw/gorko/issues/8
*/
$gorko-colors: $google-colors;

/**
* CORE CONFIG
* This powers everything from utility class generation to breakpoints
* to enabling/disabling pre-built components/utilities.
*/
$gorko-config: (
  'align': (
    'items': (
      'start': 'start',
      'center': 'center',
      'end': 'end'
    ),
    'output': 'responsive',
    'property': 'align-items'
  ),
  'case': (
    'items': (
      'upper': 'uppercase',
      'lower': 'lowercase',
      'cap': 'capitalize',
    ),
    'output': 'standard',
    'property': 'text-transform',
  ),
  'decoration': (
    'items': (
      'none': 'none',
      'underline': 'underline',
    ),
    'output': 'standard',
    'property': 'text-decoration',
  ),
  'direction': (
    'items': (
      'row': 'row',
      'column': 'column',
    ),
    'output': 'responsive',
    'property': 'flex-direction'
  ),
  'display': (
    'items': (
      'block': 'block',
      'inline-block': 'inline-block',
      'flex': 'flex',
      'inline-flex': 'inline-flex',
      'grid': 'grid',
      'none': 'none'
    ),
    'output': 'responsive',
    'property': 'display'
  ),
  'flow-space': (
    'items': $gorko-size-scale,
    'output': 'responsive',
    'property': '--flow-space',
  ),
  'flex': (
    'items': (
      '1': '1',
    ),
    'output': 'responsive',
    'property': 'flex',
  ),
  'flex-flow': (
    'items': (
      'row-wrap': 'row wrap',
      'column-wrap': 'column wrap',
    ),
    'output': 'responsive',
    'property': 'flex-flow',
  ),
  'flex-shrink': (
    'items': (
      'none': 0
    ),
    'output': 'responsive',
    'property': 'flex-shrink'
  ),
  /* https://github.com/necolas/normalize.css/issues/665 */
  'font': (
    'items': (
      'base': $font-base,
      'google-sans': $font-google-sans,
      'mono': $font-mono
    ),
    'output': 'standard',
    'property': 'font-family',
  ),
  'gap': (
    'items': map-merge($gorko-size-scale, ('auto': 'auto')),
    'output': 'responsive',
    'property': 'margin',
  ),
  'gap-top': (
    'items': map-merge($gorko-size-scale, ('auto': 'auto')),
    'output': 'responsive',
    'property': 'margin-top',
  ),
  'gap-right': (
    'items': map-merge($gorko-size-scale, ('auto': 'auto')),
    'output': 'responsive',
    'property': 'margin-right',
  ),
  'gap-bottom': (
    'items': map-merge($gorko-size-scale, ('auto': 'auto')),
    'output': 'responsive',
    'property': 'margin-bottom',
  ),
  'gap-left': (
    'items': map-merge($gorko-size-scale, ('auto': 'auto')),
    'output': 'responsive',
    'property': 'margin-left',
  ),
  'grid-cols': (
    'items': (
      '1': 'repeat(1, minmax(0, 1fr))',
      '2': 'repeat(2, minmax(0, 1fr))',
      '3': 'repeat(3, minmax(0, 1fr))',
      '4': 'repeat(4, minmax(0, 1fr))',
    ),
    'output': 'responsive',
    'property': 'grid-template-columns',
  ),
  'grid-gap': (
    'items': $gorko-size-scale,
    'output': 'responsive',
    'property': 'gap',
  ),
  'height': (
    'items': map-merge($gorko-size-scale, (
      'full': '100%',
      'half': percentage(1/2),
      'quarter': percentage(1/4),
      'third': percentage(1/3)
    )),
    'output': 'responsive',
    'property': 'height'
  ),
  'justify-content': (
    'items': (
      'between': 'space-between',
      'around': 'space-around',
      'end': 'flex-end',
      'center': 'center',
    ),
    'output': 'responsive',
    'property': 'justify-content'
  ),
  'justify-items': (
    'items': (
      'start': 'start',
      'end': 'end',
      'center': 'center',
      'stretch': 'stretch'
    ),
    'output': 'responsive',
    'property': 'justify-items'
  ),
  'justify-self': (
    'items': (
      'start': 'start',
      'end': 'end',
      'center': 'center',
    ),
    'output': 'responsive',
    'property': 'justify-self'
  ),
  'leading': (
    'items': (
      'loose': 1.7,
      'tight': 1.3,
      'flat': 1.1,
    ),
    'output': 'standard',
    'property': 'line-height',
  ),
  'measure': (
    'items': (
      'micro': '10ch',
      'compact': '30ch',
      'short': '40ch',
      'long': '748px',
      '1280': '1280px',
      '960': '960px',
    ),
    'output': 'responsive',
    'property': 'max-width',
  ),
  'object-fit': (
    'items': (
      'cover': 'cover',
    ),
    'output': 'responsive',
    'property': 'object-fit',
  ),
  'overflow': (
    'items': (
      'hidden': 'hidden',
    ),
    'output': 'responsive',
    'property': 'overflow',
  ),
  'pad': (
    'items': $gorko-size-scale,
    'output': 'responsive',
    'property': 'padding',
  ),
  'pad-top': (
    'items': $gorko-size-scale,
    'output': 'responsive',
    'property': 'padding-top',
  ),
  'pad-right': (
    'items': $gorko-size-scale,
    'output': 'responsive',
    'property': 'padding-right',
  ),
  'pad-bottom': (
    'items': $gorko-size-scale,
    'output': 'responsive',
    'property': 'padding-bottom',
  ),
  'pad-left': (
    'items': $gorko-size-scale,
    'output': 'responsive',
    'property': 'padding-left',
  ),
  'pointer': (
    'items': (
      'none': 'none',
      'auto': 'auto'
    ),
    'output': 'responsive',
    'property': 'pointer-events',
  ),
  'text': (
    'items': $gorko-size-scale,
    'output': 'responsive',
    'property': 'font-size',
  ),
  'text-align': (
    'items': (
      'center': 'center',
    ),
    'output': 'responsive',
    'property': 'text-align',
  ),
  'rounded': (
    'items': map-merge($gorko-size-scale, (
      'lg': 0.75rem, // 12px
      'full': 50%,
    )),
    'output': 'responsive',
    'property': 'border-radius',
  ),
  'stack': (
    'items': (
      '300': 0,
      '400': 10,
      '500': 20,
      '600': 30,
      '700': 40
    ),
    'output': 'standard',
    'property': 'z-index'
  ),
  'user-select': (
    'items': (
      'none': 'none',
      'auto': 'auto'
    ),
    'output': 'standard',
    'property': 'user-select',
  ),
  'visibility': (
    'items': (
      'hidden': 'hidden',
    ),
    'output': 'responsive',
    'property': 'visibility',
  ),
  'weight': (
    'items': (
      'regular': 400,
      'medium': 500
    ),
    'output': 'standard',
    'property': 'font-weight',
  ),
  'width': (
    'items': map-merge($gorko-size-scale, (
      'full': '100%',
      'half': percentage(1/2),
      'quarter': percentage(1/4),
      'third': percentage(1/3)
    )),
    'output': 'responsive',
    'property': 'width'
  ),
  'breakpoints': (
    'md': '(min-width: 592px)',
    'md-max': '(max-width: 591px)',
    'lg': '(min-width: 992px)',
    'lg-max': '(max-width: 991px)',
    'xl': '(min-width: 1440px)',
    'masonry': '(min-width: 860px)',
  ),
);

